<template>
    <div class="page">
        <m-header :title="langText&&langText.mypay" :canback="Boolean(1)"></m-header>
        <section class="body">
            <nav-item :navlist="navlist" @change="navChange"></nav-item>
            <ul class="list" :style="'height:'+(screenH-130)+'px;overflow:auto;'" v-lazy-load="lazyLoad">
                <li class="item"  v-for="(item,index) in orderList" :key="index" @click="detail(item.id)" >
                    <p class="con-item_num">{{langText&&langText.quantity}}：{{item.state ==1?item.remain_amount: item.amount2 }}</p>
                    <p class="con-item_num">单价：{{item.uprice}}</p>
                    <p class="time">{{langText&&langText.time}}：{{formDate(item.createtime)}}</p>
                    <button :class="{'color_blue':item.state==0,'color_green':item.state==2,'color_red':item.state==1}">
                        {{stateText(item.state)}}
                    </button>
                </li>
                <next ref="next" :nomore="noMore"></next>
            </ul>
        </section>
    </div>
</template>
<script>
import {mapGetters} from 'vuex';
import {Owner,Init,Trade,Business} from '@/server/server.js';
import navItem from '@/components/order-nav-item.vue';
import {Util,Load} from '@/assets/commonjs/utils.js';
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";

export default {
    components:{
        navItem
    },
    name:'Sell',
    data(){
        return {
            navlist:[
                {
                    id:'0',
                    name:'全部'
                },
                {
                    id:'1',
                    name:'已创建'
                },
                {
                    id:'2',
                    name:'待付款'
                },
                {
                    id:'4',
                    name:'已完成'
                },
            ],
            noMore:false,
            page:1,
            state:0,
            screenH:667,
            orderList:[],
            langText:null,
            allTxt:null
        }
    },
    mounted () {
        this.screenH = window.innerHeight || window.screen.availHeight;
        this.initData();
        this.getMyOrder();
    },
    computed:{
        ...mapGetters(['uid','userInfo','language','getLangId'])
    },
    methods:{
        initData(){
            Load.loadNext(this);
            this.allTxt = Object.assign({},TradeTxt,MyTxt)
            this.langText = Object.assign({},JSON.parse(localStorage.getItem('tradingcenter')))

            this.navlist[0].name = this.langText&&this.langText.all;
            this.navlist[1].name = this.langText&&this.langText.created;
            this.navlist[2].name = this.langText&&this.langText.pendingpayment;
            this.navlist[3].name = this.langText&&this.langText.completed;
        },
        /**
         * 我的买单
         * 状态（0、全部、1已创建、2待付款、3待确认、4已完成、10申诉中、20取消）
         */
        getMyOrder(){
            Business.getMyOrder({type:'1',state:this.state,page:this.page}).then(res=>{
                if(res.code ==1){
                    this.orderList = this.orderList.concat(res.data||[]);
                    if(res.data&&res.data.length<10) this.noMore = true;
                }else return mui.toast(res.msg);
            })
        },
        formDate(time){
            return Util.formatDate(time);
        },
        navChange(id){
            this.state = id;
            this.orderList = [];
            this.noMore = false;
            this.getMyOrder();
        },
        detail(id,state){
            // this.$router.push({name:'tradeDetail',query:{id,state,type1:'sell'}})
            this.$router.push({name:'BillDetails',query:{id,type:'buy'}});
        },
        goTo(){
            this.$router.push({name:'AddOrder',params:{type:'sale'}})
        },
        lazyLoad(){
            this.page = this.page+1;
            if(!this.noMore)
            this.getMyOrder();
        },
        stateText(state){
            switch(state){
                case -1:
                    return this.langText&&this.langText.expired;
                case 0:
                    return this.langText&&this.langText.created;
                case 1:
                    return '已创建';
                case 2:
                    return '待付款';
                case 3:
                    return '待确认';
                case 4:
                    return '已完成';
                case 10:
                    return '申诉中';
                case 20:
                    return '已取消';
                case 30:
                    return '已撤单';
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import '~link-less';
    .body {
            // margin-bottom: 88px;
            background-color: @bg-color;
            color: #000;
            /deep/ p{ color: #000 }
        .list {
            // padding: @padding-primary;
            width: 710px;
            margin: 20px ;
            border-right: 10px;
            .item {
                background-color: #fff;
                padding: 23px 30px;
                position: relative;
                border-right: 10px;
                margin-bottom: 30px;
                .con-item_num{
                    font-size:28px;
                    color:rgba(51,51,51,1);
                }
                .time{
                    font-size:24px;
                    color:rgba(153,153,153,1);
                }
                
                button{
                    background-color: #4EB6AD;
                    // padding: 22px 52px;
                    text-align: center;
                    line-height: 88px;
                    width: 200px;
                    height: 88px;
                    font-size:32px;
                    position: absolute;
                    top: 46px;
                    right: 30px;
                    border-radius: 10px;
                }
                
                .color_red{ background-color: #F45F5F; }
                .color_green{ background-color: #4EB6AD; }
                .color_blue{ background-color: #8498E3; }
            }
        }
    }
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
    i{
      color: #000;
    }
  }
}
</style>
